<template>
  <view class="profile-container">
    <!-- 顶部个人信息 -->
    <view class="user-header">
      <view class="user-avatar" @click="handleAvatarClick">
        <image 
          class="avatar-img" 
          :src="userInfo.avatar || '/static/logo.png'" 
          mode="aspectFill"
        />
        <view class="avatar-edit">
          <uni-icons type="camera-filled" size="16" color="#fff"></uni-icons>
        </view>
      </view>
      <view class="user-info">
        <text class="user-name">{{ userInfo.name || '未登录' }}</text>
        <text class="user-id">ID: {{ userInfo.id || '游客' }}</text>
      </view>
      <view class="user-arrow" @click="goToUserDetail">
        <uni-icons type="right" size="20" color="#999"></uni-icons>
      </view>
    </view>

    <!-- 数据统计 -->
    <view class="stats-section">
      <view class="stat-item" @click="goToStudyStats">
        <text class="stat-number">{{ studyStats.days || 0 }}</text>
        <text class="stat-label">学习天数</text>
      </view>
      <view class="stat-item" @click="goToBooks">
        <text class="stat-number">{{ studyStats.books || 0 }}</text>
        <text class="stat-label">已读书籍</text>
      </view>
      <view class="stat-item" @click="goToHomework">
        <text class="stat-number">{{ studyStats.homework || 0 }}</text>
        <text class="stat-label">完成作业</text>
      </view>
    </view>

    <!-- 功能列表 - 使用新的组件 -->
    <view class="menu-section">
      <menu-group title="学习管理">
        <menu-item 
          title="学习计划" 
          icon="calendar" 
          icon-color="#007AFF"
          @click="goToStudyPlan"
        />
        <menu-item 
          title="我的成就" 
          icon="medal" 
          icon-color="#FF9500"
          @click="goToAchievements"
        />
        <menu-item 
          title="学习笔记" 
          icon="compose" 
          icon-color="#00B894"
          @click="goToNotes"
        />
      </menu-group>

      <menu-group title="系统设置">
        <menu-item 
          title="系统设置" 
          icon="gear" 
          icon-color="#8E8E93"
          @click="goToSettings"
        />
        <menu-item 
          title="关于我们" 
          icon="info" 
          icon-color="#8E8E93"
          @click="goToAbout"
        />
        <menu-item 
          title="帮助中心" 
          icon="help" 
          icon-color="#8E8E93"
          @click="goToHelp"
        />
      </menu-group>

      <menu-group>
        <menu-item 
          title="退出登录" 
          icon="close" 
          icon-color="#FF3B30"
          is-logout
          :show-arrow="false"
          @click="handleLogout"
        />
      </menu-group>
    </view>

    <!-- 备案信息 -->
    <view class="footer-section">
      <view class="beian-info">
        <text class="beian-text">© 2024 百语梅教育科技</text>
        <text class="beian-number" @click="openBeianLink">京ICP备2024123456号-1</text>
      </view>
      <view class="version-info">
        <text class="version-text">版本 v1.0.0</text>
      </view>
    </view>
  </view>
  
  <!-- 退出登录确认对话框 -->
  <CustomModal
    v-model:visible="logoutModalVisible"
    title="退出登录"
    message="确定要退出登录吗？"
    confirm-text="确定"
    cancel-text="取消"
    @confirm="confirmLogout"
    @cancel="logoutModalVisible = false"
  />
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import menuGroup from '@/components/menuGroup.vue'
import menuItem from '@/components/menuItem.vue'
import CustomModal from '@/components/CustomModal.vue'

// 响应式数据
const userInfo = ref({
  name: '张同学',
  id: '2024001',
  avatar: '/static/logo.png'
})

const studyStats = ref({
  days: 128,
  books: 23,
  homework: 87
})

const logoutModalVisible = ref(false)

// 生命周期
onLoad(() => {
  loadUserData()
})

// 方法定义
const loadUserData = () => {
  // 这里可以从 Vuex 或 API 获取用户数据
  // 暂时使用模拟数据
}

const handleAvatarClick = () => {
  uni.showActionSheet({
    itemList: ['拍照', '从相册选择'],
    success: (res) => {
      if (res.tapIndex === 0) {
        takePhoto()
      } else {
        chooseImage()
      }
    }
  })
}

const takePhoto = () => {
  uni.chooseImage({
    count: 1,
    sourceType: ['camera'],
    success: (res) => {
      userInfo.value.avatar = res.tempFilePaths[0]
      uni.showToast({
        title: '头像更新成功',
        icon: 'success'
      })
    }
  })
}

const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    sourceType: ['album'],
    success: (res) => {
      userInfo.value.avatar = res.tempFilePaths[0]
      uni.showToast({
        title: '头像更新成功',
        icon: 'success'
      })
    }
  })
}

const goToUserDetail = () => {
  uni.navigateTo({
    url: '/pages/user/detail'
  })
}

const goToStudyStats = () => {
  uni.navigateTo({
    url: '/pages/stats/index'
  })
}

const goToBooks = () => {
  uni.switchTab({
    url: '/pages/tabs/reading/index'
  })
}

const goToHomework = () => {
  uni.switchTab({
    url: '/pages/tabs/homework/index'
  })
}

const goToStudyPlan = () => {
  uni.navigateTo({
    url: '/pages/tabs/profile/modal-demo'
  })
}

const goToAchievements = () => {
  uni.navigateTo({
    url: '/pages/achievements/index'
  })
}

const goToNotes = () => {
  uni.navigateTo({
    url: '/pages/notes/index'
  })
}

const goToSettings = () => {
  uni.navigateTo({
    url: '/pages/settings/index'
  })
}

const goToAbout = () => {
  uni.navigateTo({
    url: '/pages/about/index'
  })
}

const goToHelp = () => {
  uni.navigateTo({
    url: '/pages/help/index'
  })
}

const handleLogout = () => {
  logoutModalVisible.value = true
}

const confirmLogout = () => {
  uni.showLoading({ title: '退出中...' })
  setTimeout(() => {
    uni.removeStorageSync('token')
    uni.removeStorageSync('userInfo')
    uni.hideLoading()
    uni.showToast({
      title: '已退出登录',
      icon: 'success'
    })
    setTimeout(() => {
      uni.reLaunch({ url: '/pages/login/index' })
    }, 1500)
  }, 1000)
}

const openBeianLink = () => {
  uni.showModal({
    title: '备案信息',
    content: '京ICP备2024123456号-1\n\n百语梅教育科技有限公司',
    showCancel: false,
    confirmText: '知道了'
  })
}
</script>

<style lang="scss" scoped>
.profile-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;

  >.user-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 60rpx 40rpx 80rpx;
    display: flex;
    align-items: center;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: -30rpx;
      left: 0;
      right: 0;
      height: 60rpx;
      background: #f5f5f5;
      border-radius: 30rpx 30rpx 0 0;
    }

    >.user-avatar {
      position: relative;
      margin-right: 30rpx;
      
      >.avatar-img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        border: 4rpx solid rgba(255, 255, 255, 0.3);
      }
      
      >.avatar-edit {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 40rpx;
        height: 40rpx;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    >.user-info {
      flex: 1;
      
      >.user-name {
        display: block;
        font-size: 36rpx;
        font-weight: bold;
        color: #fff;
        margin-bottom: 10rpx;
      }
      
      >.user-id {
        display: block;
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.8);
      }
    }

    >.user-arrow {
      color: rgba(255, 255, 255, 0.6);
    }
  }

  >.stats-section {
    background: #fff;
    margin: 20rpx 30rpx;
    border-radius: 20rpx;
    padding: 40rpx 0;
    display: flex;
    justify-content: space-around;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

    >.stat-item {
      text-align: center;
      padding: 0 20rpx;
      
      >.stat-number {
        display: block;
        font-size: 40rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      >.stat-label {
        display: block;
        font-size: 24rpx;
        color: #666;
      }
    }
  }

  >.menu-section {
    margin: 20rpx 30rpx;
  }

  >.footer-section {
    text-align: center;
    margin-top: 60rpx;
    padding: 0 30rpx;

    >.beian-info {
      >.beian-text {
        display: block;
        font-size: 24rpx;
        color: #999;
        margin-bottom: 10rpx;
      }
      
      >.beian-number {
        display: block;
        font-size: 24rpx;
        color: #666;
        text-decoration: underline;
      }
    }

    >.version-info {
      margin-top: 20rpx;
      
      >.version-text {
        font-size: 22rpx;
        color: #ccc;
      }
    }
  }
}
</style>